<template>
    <div>
        <el-container class="common-layout">
            <el-aside class="el-aside">
                <div class="logo"></div>
                <el-menu active-text-color="#ffd04b"
                        background-color="rgb(0,173,94)" text-color="#fff" router>
                    <el-menu-item index='/shouye/wenfenlei'>
                        <el-icon><Management /></el-icon>
                        <span>文章分类</span>
                    </el-menu-item>
                    <el-menu-item index='/shouye/wenguanli'>
                        <el-icon><Promotion /></el-icon>
                        <span>文章管理</span>
                    </el-menu-item>
                    <el-sub-menu>
                        <template #title>
                            <el-icon><UserFilled /></el-icon>
                            <span>个人中心</span>
                        </template>
                        <el-menu-item index='/shouye/personziliao'>
                            <el-icon><User /></el-icon>
                            <span>基本资料</span>
                        </el-menu-item>
                        <el-menu-item index='/shouye/persontouxiang'>
                            <el-icon> <Crop /></el-icon>
                            <span>更换头像</span>
                        </el-menu-item>
                            <el-menu-item index='/shouye/personmima'>
                            <el-icon> <EditPen /></el-icon>
                        <span>重置密码</span>
                    </el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </el-aside>
            <el-container class="el-container">
                <el-header class="el-header">
                    <div class="div01">
                        <strong>昵称：</strong>
                        <span v-if="us.denglu.nickname!=''">{{us.denglu.nickname}}</span>
                        <span v-else>未命名</span>
                    </div>
                    <div class="div02">
                        <el-avatar :src="us.denglu.userPic">
                          <template #default>
                            <el-icon><User /></el-icon>
                          </template>
                        </el-avatar>
                        <div class="flex flex-wrap items-center" style="margin-left: 20px;margin-top: 10px;">
                            <el-dropdown @command="handleCommand">
                                <span class="el-dropdown-link">
                                我<i class="el-icon-arrow-down el-icon--right"></i>
                                </span>
                                <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item command="personziliao">基本资料</el-dropdown-item>
                                    <el-dropdown-item command="persontouxiang">更换头像</el-dropdown-item>
                                    <el-dropdown-item command="personmima">修改密码</el-dropdown-item>
                                    <el-dropdown-item command="Login">退出登录</el-dropdown-item>
                                </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                    </div>
                    </div>
                </el-header>
                <el-main class="el-main">
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script setup>
import { ref, reactive ,onMounted} from 'vue'
import { Avatar ,User,Crop,EditPen,UserFilled,Promotion,Management,Plus} from '@element-plus/icons-vue'
// 引入提示框
import { ElMessage,ElMessageBox} from 'element-plus'
// 引入容器对象
import {useUserStore} from '@/stores/token.js';
// 引入路由
import { useRouter } from 'vue-router';
const router = useRouter(); // 获取路由对象

const us=useUserStore(); //获取容器对象
console.log(us.denglu); //获取容器对象中的数据


const handleCommand = (command) => {
  switch (command) {
    case 'personziliao':
      router.push('/shouye/personziliao'); // 跳转到基本资料页面
      break;
    case 'persontouxiang':
      router.push('/shouye/persontouxiang'); // 跳转到更换头像页面
      break;
    case 'personmima': // 修正拼写错误
      router.push('/shouye/personmima'); // 跳转到重置密码页面
      break;
    case 'Login':
      logout(); // 执行退出登录操作
      break;
    default:
      break;
  }
};

// 退出登录
const logout = () => {
  // 例如：清除用户登录状态，跳转到登录页面
  ElMessageBox.confirm(
    '确认退出登录吗？',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
     // 清除用户登录状态
      us.removedenglu();
      router.push('/');
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消退出登录',
      })
    })
};
</script>


<style lang='scss' scoped>
.common-layout{
    width: 100%;
    height: 100vh;
    .el-aside{
        background-color: rgb(0,173,94);
        width: 20%;
        .logo{
            height: 15vh;
            background-image: url("../assets/logo.png");
            background-repeat: no-repeat;
            background-position: center;
            background-position: 60px 30px;
        }
    }
    .el-container{
        width: 80%;
        .el-header{
            background-color: rgba(253,255,252);
            height: 8vh;
            display: flex;
            justify-content:space-between;
            .div01{
                padding: 10px;
                margin-top: 10px;
            }
            .div02{
                padding: 10px;
                display: flex;
                margin-right: 20px;
            }
        }
        .el-main{
            background-color: rgba(243,245,242);
        }
    }
}
.example-showcase .el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

//下拉列表样式
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
  display: flex;
  align-items: center;
}

.el-dropdown-menu {
  background-color: #fff;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.el-dropdown-menu__item {
  color: #606266;
  padding: 8px 20px;
}

.el-dropdown-menu__item:hover {
  background-color: #f5f7fa;
  color: #409EFF;
}
.el-icon {
  font-size: 20px; /* 调整图标大小 */
  
}
</style>